<template>
	<!-- 忘记密码 -->
	<view class="center">
		<fui-section marginBottom="80" style="padding: 0;" title="重置密码" size="60" color="#fd5531"></fui-section>
		<!-- 手机号 -->
		<fui-form ref="formRef" top="50">
			<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" placeholder="请输入手机号" v-model="formData.mobile">
				<template #left>
					<view class="fui-left__icon">
						<fui-icon name="mobile" :size="48" color="var(--fui-color-primary)"></fui-icon>
					</view>
				</template>
			</fui-input>

			<!-- 验证码 -->
			<fui-input backgroundColor="#F3F9FC" placeholder="请输入验证码" v-model="formData.code" marginTop="30" radius="20" :padding="['23rpx','32rpx']">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="captcha" :size="48" color="var(--fui-color-primary)"></fui-icon>
					</view>
				</template>
				<fui-countdown-verify borderColor="var(--fui-color-primary)" background="var(--fui-color-primary)" sent="秒后获取" color="#fff" radius="40" ref="smsRef" @send="sendCode">
				</fui-countdown-verify>
			</fui-input>

			<!-- 密码 -->
			<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" marginTop="30" placeholder="请输入登录密码" v-model="formData.password">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="captcha" :size="48" color="var(--fui-color-primary)"></fui-icon>
					</view>
				</template>
				<template #default>
					<view class="fui-left__icon">
						<fui-icon color="var(--fui-color-primary)" :size="50"></fui-icon>
					</view>
				</template>
			</fui-input>


			<fui-input backgroundColor="#F3F9FC" autocomplete="off" radius="20" marginTop="30" placeholder="请再次输入新密码" v-model="formData.password2">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="captcha" :size="48" color="var(--fui-color-primary)"></fui-icon>
					</view>
				</template>
				<template #default>
					<view class="fui-left__icon">
						<fui-icon color="var(--fui-color-primary)" :size="50"></fui-icon>
					</view>
				</template>
			</fui-input>
				
			<!-- 图形验证码 -->
			<fui-input cursorSpacing="70" v-if="formItem.needCaptcha" autocomplete="off" backgroundColor="#F3F9FC" :padding="['10rpx','32rpx']" radius="20" marginTop="60" placeholder="请输入验证码" v-model="formData.captcha">
				<template v-slot:left>
					<view class="fui-left__icon">
						<fui-icon name="captcha" color="var(--fui-color-primary)" :size="48"></fui-icon>
					</view>
				</template>
				<template #default>
					<uni-captcha v-if="formItem.needCaptcha" focus ref="captchaRef" scene="reset-pwd-by-sms" />
				</template>
			</fui-input>

			<!-- 确认修改 -->
			<view style="margin-top: 80rpx;">
				<fui-button text="确认" :loading="formItem.loading" @click="submit" bold background="linear-gradient(to right top, #ff6f49, #ff5a5e)"></fui-button>
			</view>
			<!-- 去登录 -->
			<view class="register">
				<text class="tologin" @click="toLoing">返回登录</text>
			</view>

		</fui-form>

		<!-- 滑动验证 -->
		<fui-slider-captcha ref="scRef" @closeVerify="closeVerify" :src="url" :imageType="3" @success="success" @fail="fail" maskClosable></fui-slider-captcha>

	</view>
</template>
<script setup>
	import { reactive, ref } from "vue"
	import { useResetPwd } from "@/hooks/useResetPwd"
	import { checkPssword } from "@/utils/validator.js"
	const password = ref(true) //密码显示隐藏
	const formRef = ref(null) //表单实例
	//校验规则
	const rules = reactive([{
		name: "mobile",
		rule: ["required", "isMobile"],
		msg: ["请输入手机号", "请输入正确的手机号"]
	}, {
		name: "code",
		rule: ["required", 'isNumber'],
		msg: ["请输入验证码"]
	}, {
		name: "password",
		rule: ["required"],
		msg: ["请输入新密码", "密码必须包含字母，密码长度必须在6-16位之间"],
		validator: [{ msg: '密码必须包含字母，密码长度必须在6-16位之间', method: checkPssword }]
	}, {
		name: "password2",
		rule: ["required"],
		msg: ["请再次输入密码"],
		validator: [{
			msg: '两次输入密码不一致',
			method: (value) => value != formData.value.password ? false : true
		}]
	}]);
	const smsRef = ref(null) // 手机验证码实例
	const scRef = ref(null) //  图形验证实例 
	const captchaRef = ref(null) // 验证码实例
	const { formData, formItem, submit, toLoing, toSmsPage, url } = useResetPwd(formRef, captchaRef,rules)

	// 图形验证码验证成功后
	const success = () => {
		uni.showLoading({
			title: '校验成功',
			mask: true
		});
		setTimeout(async () => {
			// 关闭图形验证码
			scRef.value.closeVerify()
			// 获取短信接口
			const res = await toSmsPage()
			// 开始短信倒计时
			if (res.errCode == 0) smsRef.value && smsRef.value.success()
			uni.hideLoading()
		}, 200)
	}
	const fail = (e) => {
		//当验证失败多次时，可在这里做相应处理
		scRef.value.reset()
	}

	// 获取短信验证码
	const sendCode = () => {
		setTimeout(() => {
			//打开验证框，需要等组件初始化完成
			scRef.value && scRef.value.show()
			//发送短信
			//...
		}, 800)
	}
	// 关闭弹窗的时候重置短信验证
	const closeVerify = (val) => {
		smsRef.value && smsRef.value.reset()
	}
</script>

<style lang="scss" scoped>
	.center {
		box-sizing: border-box;
		width: 100%;
		padding: 60rpx;
		background: var(--fui-bg-color);
		height: 100vh;
	}

	.register {
		display: flex;
		justify-content: center;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		color: var(--fui-color-subtitle);
		margin-top: 20rpx;
	}

	.fui-left__icon {
		padding-right: 24rpx;
	}
</style>